<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="fullName='lao liu'">改名称</button>
    <p>{{firstName}}--{{lastName}}</p>
    <p>{{fullName}}</p>
    <p>{{count}}--{{doubleCount}}</p>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"AboutView",
})
</script>

<script lang="ts" setup>
import {ref,computed} from "vue";
let firstName = ref("xiao")
let lastName = ref("qi")
const fullName = computed({
    get(){
        return firstName.value + " " + lastName.value
    },
    set(val){
        [firstName.value,lastName.value] = val.split(" ")
    }
})
let count = ref(2)
const doubleCount = computed(()=>{
    return count.value * 2
})
</script>
